body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  font-size: 0.5rem;
  line-height: 1.15;
  background: url(../imgs/bg.jpg) no-repeat 0 0 / cover;
}
h4,
h3,
ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
.viewport {
  max-width: 1920px;
  /* min-width: 84px; */
  margin: 0 auto;
  min-height: 780px;
  padding: 1.1rem 0.25rem 0;
  background: url(../imgs/logo.png) no-repeat 0 0 / contain;
  display: flex;
  justify-content: space-between;
}

.column:nth-child(1) {
  width: 29%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .column1_overview {
    box-sizing: border-box;
    border-width: 20px; /* 设置边框宽度 */
    border-style: solid; /* 设置边框样式 */
    border-image-source: url(../imgs/border.png); /* 设置边框图片 */
    border-image-slice: 30; /* 切割边框图片 */
    border-image-repeat: stretch;
    height: 13%;
    width: 100%;
    /* background-color: aqua; */
  }
  .column1_overview {
    width: 100%;
    display: flex;
    justify-content: space-around;
    h3 {
      text-align: center;
      font-size: 0.3rem /* 20px -> .25rem */;
      color: aliceblue;
    }
    p {
      font-size: 0.18rem /* 16px -> .2rem */;
      color: rgb(47, 113, 210);
      i {
        font-size: 0.16rem /* 16px -> .2rem */;
        font-weight: 700;
      }
    }
  }
  .column1_monitor {
    box-sizing: border-box;
    border-width: 20px; /* 设置边框宽度 */
    border-style: solid; /* 设置边框样式 */
    border-image-source: url(../imgs/border.png); /* 设置边框图片 */
    border-image-slice: 30; /* 切割边框图片 */
    border-image-repeat: stretch;
    height: 50%;
    width: 100%;

    .title {
      color: rgb(255, 255, 255);
      height: 0.175rem; /* 30px -> .375rem */
      /* background-color: antiquewhite; */
      line-height: 0.175rem;
      font-size: 0.21rem /* 20px -> .25rem */;
      margin-bottom: 0.125rem /* 10px -> .125rem */;
    }
    .scoll-title {
      height: 20px;
      display: flex;

      color: rgb(120, 185, 242);
      font-size: 0.1675rem /* 15px -> .1875rem */;
      span:nth-child(1) {
        margin-right: 0.28rem /* 50px -> .625rem */;
        margin-left: 0.425rem /* 50px -> .625rem */;
      }
      span:nth-child(2) {
        margin-right: 1.985rem /* 50px -> .625rem */;
      }
    }

    .scoll-box {
      margin: auto;
      width: 96%;
      height: 310px;
      overflow: hidden;
      ul {
        margin: 0.125rem /* 10px -> .125rem */ 0.165rem /* 10px -> .125rem */;
        display: flex;
        justify-content: space-around;
        color: rgb(120, 185, 242);
        font-size: 0.1375rem /* 15px -> .1875rem */;
      }
    }
  }
  .column1_point {
    box-sizing: border-box;
    border-width: 20px; /* 设置边框宽度 */
    border-style: solid; /* 设置边框样式 */
    border-image-source: url(../imgs/border.png); /* 设置边框图片 */
    border-image-slice: 30; /* 切割边框图片 */
    border-image-repeat: stretch;

    height: 33%;
    width: 100%;
    display: flex;
    flex-direction: column;
    .title {
      color: rgb(255, 255, 255);
      height: 0.175rem; /* 30px -> .375rem */
      /* background-color: antiquewhite; */
      line-height: 0.175rem;
      font-size: 0.21rem /* 20px -> .25rem */;
    }
    .echartbox {
      display: flex;
      margin-top: 20px /* 20px -> .25rem */;
      .echart {
        height: 2.5rem /* 600px -> 7.5rem */;
        width: 3.6rem;
      }
      .navtext {
        box-sizing: border-box;
        border-radius: 0 20px 0 20px;
        padding: 0.3rem 0.225rem /* 10px -> .125rem */;
        width: 1.8rem;
        height: 2.5rem;
        background-color: rgb(12, 12, 96);
        color: aliceblue;
        h3 {
          font-size: 0.3rem /* 20px -> .25rem */;
        }
        p {
          font-size: 0.18rem /* 16px -> .2rem */;
          color: rgb(47, 113, 210);
          i {
            font-size: 0.16rem /* 16px -> .2rem */;
          }
        }
      }
    }
  }
}

.column:nth-child(2) {
  width: 39%;
  margin: 0.333rem 0.233rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .column2_map {
    height: 64%;
    width: 100%;
    /* background-color: rgb(40, 40, 40); */
    .title {
      color: rgb(255, 255, 255);
      height: 0.175rem; /* 30px -> .375rem */
      /* background-color: antiquewhite; */
      line-height: 0.175rem;
      font-size: 0.21rem /* 20px -> .25rem */;
    }
    .echart {
      margin-top: 10px;
      width: 100%;
      height: 95%;
    }
  }

  .column2_column {
    box-sizing: border-box;
    border-width: 20px; /* 设置边框宽度 */
    border-style: solid; /* 设置边框样式 */
    border-image-source: url(../imgs/border.png); /* 设置边框图片 */
    border-image-slice: 30; /* 切割边框图片 */
    border-image-repeat: stretch;
    height: 34%;
    width: 100%;
    .title {
      color: rgb(255, 255, 255);
      height: 0.175rem; /* 30px -> .375rem */
      /* background-color: antiquewhite; */
      line-height: 0.175rem;
      font-size: 0.21rem /* 20px -> .25rem */;
    }
    .echartbox {
      display: flex;
      margin-top: 20px /* 20px -> .25rem */;
      .echart {
        height: 2.5rem;
        width: 6rem;
      }
      .navtext {
        box-sizing: border-box;
        border-radius: 0 20px 0 20px;
        padding: 0.3rem 0.225rem /* 10px -> .125rem */;
        width: 1.8rem;
        height: 2.5rem;
        background-color: rgb(12, 12, 96);
        color: aliceblue;
        h3 {
          font-size: 0.3rem /* 20px -> .25rem */;
        }
        p {
          font-size: 0.18rem /* 16px -> .2rem */;
          color: rgb(47, 113, 210);
          i {
            font-size: 0.16rem /* 16px -> .2rem */;
          }
        }
      }
    }
  }
}

.column:nth-child(3) {
  width: 29%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .column3_orderGoods {
    box-sizing: border-box;
    border-width: 20px; /* 设置边框宽度 */
    border-style: solid; /* 设置边框样式 */
    border-image-source: url(../imgs/border.png); /* 设置边框图片 */
    border-image-slice: 30; /* 切割边框图片 */
    border-image-repeat: stretch;
    height: 16%;
    width: 100%;
    ul {
      width: 70%;
      height: 20%;
      display: flex;
      font-size: 0.2rem /* 20px -> .25rem */;
      align-items: center;
      justify-content: space-around;
      color: rgb(47, 113, 210);
    }
    div {
      width: 70%;
      display: flex;
      justify-content: space-between;
      .item {
        margin-left: 0.25rem;
        margin-top: 0.19rem /* 20px -> .25rem */;
        display: flex;
        flex-direction: column;
        h3 {
          font-size: 0.27rem /* 20px -> .25rem */;
          color: aliceblue;
        }
        p {
          font-size: 0.18rem /* 16px -> .2rem */;
          color: rgb(47, 113, 210);
          i {
            font-size: 0.16rem /* 16px -> .2rem */;
          }
        }
      }
    }
  }
  .column3_salesVolume {
    box-sizing: border-box;
    border-width: 20px; /* 设置边框宽度 */
    border-style: solid; /* 设置边框样式 */
    border-image-source: url(../imgs/border.png); /* 设置边框图片 */
    border-image-slice: 30; /* 切割边框图片 */
    border-image-repeat: stretch;
    height: 24%;
    width: 100%;
    .title {
      color: rgb(255, 255, 255);
      height: 0.175rem; /* 30px -> .375rem */
      line-height: 0.175rem;
      font-size: 0.21rem /* 20px -> .25rem */;
      display: flex;
      span {
        margin-top: 0.035rem /* 10px -> .125rem */;
      }
      .line {
        color: rgb(71, 135, 194);

        margin: 0 0.25rem /* 20px -> .25rem */;
      }
      ul {
        display: flex;
        color: rgb(93, 119, 222);
        li {
          font-size: 0.1475rem /* 15px -> .1875rem */;
          margin: 0 0.15rem /* 20px -> .25rem */;
          width: 0.22rem;
          height: 0.22rem;

          text-align: center;
          line-height: 0.24rem;
        }
      }
    }
    .echart {
      margin-top: 10px;
      width: 100%;
      height: 95%;
    }
  }
  .column3_channelSales {
    height: 24%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .channelSales_box {
      box-sizing: border-box;
      border-width: 20px; /* 设置边框宽度 */
      border-style: solid; /* 设置边框样式 */
      border-image-source: url(../imgs/border.png); /* 设置边框图片 */
      border-image-slice: 30; /* 切割边框图片 */
      border-image-repeat: stretch;
      width: 48%;
      height: 100%;
      .title {
        color: rgb(255, 255, 255);
        height: 0.175rem; /* 30px -> .375rem */
        line-height: 0.175rem;
        font-size: 0.21rem /* 20px -> .25rem */;
      }
      .echart {
        margin-top: 10px;
        width: 100%;
        height: 95%;
      }
    }

    .box2 {
      .echart {
        margin-top: 10px;
        width: 100%;
        height: 50%;
      }
      .text {
        margin-top: 0.25rem;
        width: 100%;
        height: 45%;
        display: flex;
        justify-content: space-around;
        .item {
          h3 {
            text-align: center;
            font-size: 0.26rem /* 20px -> .25rem */;
            color: aliceblue;
          }
          p {
            font-size: 0.16rem /* 16px -> .2rem */;
            color: rgb(47, 113, 210);
            i {
              font-size: 0.16rem /* 16px -> .2rem */;
              font-weight: 700;
            }
          }
        }
      }
    }
  }
  .column3_rank {
    box-sizing: border-box;
    border-width: 20px; /* 设置边框宽度 */
    border-style: solid; /* 设置边框样式 */
    border-image-source: url(../imgs/border.png); /* 设置边框图片 */
    border-image-slice: 30; /* 切割边框图片 */
    border-image-repeat: stretch;
    height: 30%;
    width: 100%;
    .title {
      height: 10%;
      color: rgb(255, 255, 255);
      height: 0.175rem; /* 30px -> .375rem */
      /* background-color: antiquewhite; */
      line-height: 0.175rem;
      font-size: 0.21rem /* 20px -> .25rem */;
      span {
        margin-right: 0.5rem; /* 40px -> .5rem */
      }
    }
    .context {
      margin-top: 0.39rem;
      display: flex;
      height: 80%;

      .col1 {
        font-size: 0.2rem /* 16px -> .2rem */;

        width: 23%;
        height: 100%;
        li {
          height: 33%;
          display: flex;
          align-items: center;
          justify-content: center;
          list-style: none;
          i {
            font-size: 0.375rem /* 30px -> .375rem */;
            margin-right: 0.125rem /* 10px -> .125rem */;
          }
        }
      }

      .col2 {
        font-size: 0.2rem /* 16px -> .2rem */;
        width: 34%;
        height: 90%;

        display: flex;
        justify-content: space-around;
        ul {
          display: flex;
          height: 100%;

          flex-direction: column;
          justify-content: space-between;
          li {
            i {
              font-size: 0.15rem /* 14px -> .175rem */;
            }
          }
        }
      }
    }
  }
}
